<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta http-equiv="Cache-Control" content="no-cache" />
    <title></title>
    <link rel="stylesheet" href="css/neat.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <style>
        html,body{
            width: 100%;
            height:100%;
        }
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function () {
                        var clientWidth = docEl.clientWidth;
                        if (!clientWidth) return;
                        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                    };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body>
    <div class="main">
        <img src="img/logo.png" alt="" class="logo"/>
        <p class="title">Login</p>
        <input type="text" class="input username" placeholder="Username"/>
        <input type="password" class="input" placeholder="Password" style="margin-bottom: 0;"/>
        <div class="n">
            <label for="ck"><input type="checkbox" name="ck" id="ck"/>Remember me</label>
            <a href="#n" class="fogot-pwd">Fogot password?</a>
        </div>
        <button class="btn btn-blue">Login</button>
        <a href="#n" class="sign-up">Sign Up</a>
        <button class="btn btn-lightblue">Login width Facebook</button>
    </div>

    <div id="mask" class="mask"> <!--遮罩层-->
        <div class="sign-up-mask">
            <i class="icon-close"></i>
            <p class="title">Sign Up</p>
            <input type="text" class="input username" placeholder="Username"/>
            <input type="text" class="input email" placeholder="Email"/>
            <input type="text" class="input phone" placeholder="Phone"/>
            <input type="password" class="input pwd" placeholder="Password"/>
            <input type="password" class="input confirm-pwd" placeholder="Confirm Password"/>
            <button class="btn btn-blue">Registration</button>
            <div class="tip">
                <p>By clicking <code><<</code>Registration<code>>></code> you agree to our</p>
                <a href="#n">Terms of Service.</a>
            </div>
        </div>
        <div class="fogot-pwd-mask">
            <i class="icon-close"></i>
            <p class="title">Fogot Password</p>
            <div class="tip">
                <p>Never was anything great achieved without danger.</p>
            </div>
            <input type="text" class="input email" placeholder="Email"/>
            <button class="btn btn-blue">Recover Password</button>
        </div>
    </div>

    <script src="js/zepto.js"></script>
    <script src="js/touch.js"></script>
    <script src="js/public.js"></script>
</body>
</html>